import type { LoadingConfig, PaginationProps } from "@pureadmin/table";
import { ref, onMounted, reactive } from "vue";
import { delay } from "@pureadmin/utils";
import type { PlusColumn } from "plus-pro-components";

export function useColumns() {
  const loading = ref(true);

  const columnsDrag = ref<PlusColumn[]>([
    {
      label: "证书编号",
      prop: "certificateNumber"
    },
    {
      label: "证书类型",
      prop: "certificateType",
      valueType: "select",
      options: [
        { label: "资质证书", value: "1" },
        { label: "安全生产许可证", value: "2" },
        { label: "建筑业证书", value: "3" },
        { label: "其他", value: "4" }
      ]
    },
    {
      label: "有效期",
      prop: "validityPeriod",
      valueType: "date-picker"
    },
    {
      label: "资质类别及等级",
      prop: "qualificationCategoryAndLevel",
      valueType: "input-number",
      fieldProps: { precision: 2, step: 1 }
    },
    {
      label: "企业名称",
      prop: "companyName"
    },
    {
      label: "法定代表",
      prop: "legalRepresentative"
    },
    {
      label: "注册资本",
      prop: "registeredCapital",
      align: "right"
    },
    {
      label: "经济性质",
      prop: "economicNature"
    },
    {
      label: "详细地址",
      prop: "detailAddress"
    },
    {
      label: "备注",
      prop: "remark"
    }
  ]);

  const columns = ref<TableColumnList>([
    {
      label: "证书编号",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "证书类型",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "有效期",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "资质类别及等级",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "企业名称",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "法定代表",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "注册资本",
      prop: index => columnsDrag.value[index].prop as string,
      align: "right",
      sortable: true
    },
    {
      label: "经济性质",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "详细地址",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "备注",
      prop: index => columnsDrag.value[index].prop as string,
      sortable: true
    },
    {
      label: "操作",
      width: "200",
      fixed: "right",
      slot: "operation"
    }
  ]);

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 20,
    currentPage: 1,
    pageSizes: [20, 40, 60],
    total: 0,
    align: "right",
    background: true,
    size: "default"
  });

  /** 加载动画配置 */
  const loadingConfig = reactive<LoadingConfig>({
    text: "正在加载第一页...",
    viewBox: "-10, -10, 50, 50",
    spinner: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // svg: "",
    // background: rgba()
  });

  function onSizeChange(val) {
    console.log("onSizeChange", val);
  }

  function onCurrentChange(val) {
    loadingConfig.text = `正在加载第${val}页...`;
    loading.value = true;
    delay(600).then(() => {
      loading.value = false;
    });
  }

  onMounted(() => {
    delay(600).then(() => {
      loading.value = false;
    });
  });

  return {
    loading,
    columnsDrag,
    columns,
    pagination,
    loadingConfig,
    onSizeChange,
    onCurrentChange
  };
}
